<template>
  <div class="contain">
    <el-amap-search-box
      v-if="!disabled"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    />
    <div v-if="!disabled" class="resetBtn" @click="resetCenter">恢复</div>
    <div class="btnDraw cancel" @click="handleClearDraw">重置</div>
    <!-- 地图 -->
    <el-amap
      class="amap-box"
      :class="disabled ? 'disabled' : ''"
      :zoom="amap.zoom"
      :center="amap.center"
      :plugin="amap.plugin"
      :events="amap.events"
      :features="amap.features"
    >
    </el-amap>
  </div>
</template>
<script>

export default {
  name: "Map",
  props: {
    lnglatForm: {
      type: Object,
      default: () => ({})
    },
    radius: {
      type: [String, Number],
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
  },
  data() {
    const self = this;
    return {
      searchVal: '',
      searchOption: {
        city: "全国",
        // citylimit: true,
      },
      pot: [],
      // 地图对象
      amap: {
        zoom: 13,
        center: [120.09, 30.89],
        events: {
          init: self.initAMap
        },
        plugin: [
          {
            pName: 'MapType',
            defaultType: 1, // 0代表默认，1代表卫星
            showLabel: true,
            showRoad: true, // 路网
            showTraffic: false, // 路况
          }
        ],
        features: ['bg', 'road', 'building', 'point']
      },
      lnglat: {},
      oldCenter: [],
      haslnglat: false
    };
  },
  watch: {
    lnglatForm: {
      handler(e) {
        if (e && e.lng) {
          this.oldCenter = e
          this.amap.center = [e.lng, e.lat]
        }
      },
      deep: true
    },
    radius: {
      handler(e) {
        if (e) {
          // this.setMapCircle()
        }
      },
      deep: true
    }
  },
  created () {
    if (this.disabled) this.amap.zoom = 11
    if (this.lnglatForm.lng && this.lnglatForm.lat) {
      this.oldCenter = this.lnglatForm
      this.amap.center = [this.lnglatForm.lng, this.lnglatForm.lat]
      this.haslnglat = true
    } else {
      this.oldCenter = {
        lng: 120.09, lat: 30.89
      }
      this.amap.center = [120.09, 30.89]
      // 定位
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
          let lat = position.coords.latitude;
          let lng = position.coords.longitude;
          if (lat && lng) {
            this.oldCenter = {
              lng, lat
            }
            this.amap.center = [lng, lat]
          }
        })
      }
    }
  },
  mounted () {
  },
  methods: {
    onSearchResult (pois) {
      this.lnglat = {
        lng: pois[0].lng,
        lat: pois[0].lat
      }
      this.setMapMarker(true)
    },
    resetCenter () {
      this.lnglat = { ...this.oldCenter }
      this.setMapMarker(true)
      this.map.setZoom(this.amap.zoom)
    },
    initAMap (o) {
      this.map = o
      this.lnglat = { ...this.oldCenter }
      this.setMapMarker()

      !this.disabled && this.map.on("click", (e) => {
        this.haslnglat = true
        // 获取经纬度
        this.lnglat = {
          lng: e.lnglat.lng, lat: e.lnglat.lat
        }
        // 标记点
        this.setMapMarker();
      });
    },
    // 标记点
    setMapMarker (bool) {
      // 清除标记点
      if (this.marker) {
        this.map.remove(this.marker);
      }
      // 自动适应显示想显示的范围区域
      this.map.setFitView();
      this.marker = new AMap.Marker({
        map: this.map,
        position: [this.lnglat.lng, this.lnglat.lat],
      });
      bool && this.map.setFitView();
      this.map.add(this.marker);
      this.disabled && this.setMapCircle()
      this.haslnglat && this.updateLocation()
    },
    setMapCircle () {
      if (this.circle) {
        this.map.remove(this.circle);
      }
      if (this.radius) {
        this.circle = new AMap.Circle({
          center: new AMap.LngLat(this.lnglat.lng, this.lnglat.lat), // 圆心位置
          radius: this.radius * 1000,  //半径
          strokeColor: "#76D5C2",  //线颜色
          strokeOpacity: 1,  //线透明度
          strokeWeight: 1,  //线粗细度
          fillColor: "#76D5C2",  //填充颜色
          fillOpacity: 0.35 //填充透明度
        })
        this.map.add(this.circle);
      }
    },
    updateLocation () {
      this.$emit('updateLocation', this.lnglat)
    },
  },
};
</script>
<style lang="scss" scoped>
.contain {
  width: 100%;
  height: 100%;
  position: relative;

  .amap-box {
    height: calc(100% - 32px);
    &.disabled {
      height: 100%;
    }
  }
  .resetBtn {
    width: 50px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: 0 2px 2px rgba(0,0,0,.15);
    z-index: 9;
    cursor: pointer;
  }
}
::v-deep {
  .el-vue-search-box-container {
    width: calc(100% - 50px);
    height: 32px;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    background: #fff;
  }
}
</style>
